<template>

  <n-select  v-bind="props" v-model:value="uncontrolValue" :options="options" :render-label="renderLabel" @update:value="changeValue">
    <template #header>
      <slot name="header"></slot>
    </template>
    <template #action>
      <slot name="action"></slot>
    </template>
  </n-select>
</template>

<script setup lang="ts">
import { NSelect, NImage } from 'naive-ui'
import { toRef, h, ref, watch } from 'vue';

const emit = defineEmits(['update:value'])
const props = defineProps({
  ...NSelect.props
});

const controlValue = toRef(props, 'value');
const uncontrolValue = ref(props.value);

watch(controlValue, () => {
  uncontrolValue.value = controlValue.value
})

const renderLabel = (option: any): any => {
  return h('div', {
    class: 'flex items-center',
    style: {
      padding: '10px 0'
    }
  }, [
    h(NImage, {
      src: option.url,
      fit: 'cover',
      width: 30
    }),
    h('span', {
      style: {
        marginLeft: '4px',

      }
    }, option.label)
  ])
}

function changeValue(value: any) {
  emit('update:value', value)
}









</script>
